<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- 顶部 -->
    <div class="row-item row-main padding-16">
      <h1 class="demo" @click="handlerTest">商品中心</h1>
      <p class="demo float-rig"><van-icon size="36" name="scan" /></p>
    </div>
    <!-- 首推商品 -->
    <van-swipe class="nav-card" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <van-image
          class="loopImg"
          radius="9"
          src="https://www.luckincoffee.com/template/images/tea/intro_6.jpg"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" /> </template
        ></van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          class="loopImg"
          radius="9"
          src="https://www.luckincoffee.com/template/images/tea/product_wheel_tea_main-2.png"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" /> </template
        ></van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          class="loopImg"
          radius="9"
          src="https://www.luckincoffee.com/template/images/tea/product_wheel_tea_5-2.png"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" /> </template
        ></van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          class="loopImg"
          radius="9"
          src="https://www.luckincoffee.com/template/images/tea/product_4_new.jpg"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" /> </template
        ></van-image>
      </van-swipe-item>
    </van-swipe>
    <!-- 卡片区域 -->
    <ul class="card-box">
      <li class="card-item">
        <img
          class="loopImg"
          src="https://www.luckincoffee.com/template/images/tea/product_wheel_tea_2-2.png"
          alt=""
        />
        <span class="mask-tip hvr-bounce-to-top">小鹿茶</span>
      </li>
      <li class="card-item">
        <img
          class="loopImg"
          src="https://www.luckincoffee.com/template/images/tea/product_wheel_coffee_2_new.jpg"
          alt=""
        />
        <span class="mask-tip hvr-bounce-to-top">大师咖啡</span>
      </li>
      <li class="card-item">
        <img
          class="loopImg"
          src="https://www.luckincoffee.com/template/images/homepage/cooperation/part5_picture2.png"
          alt=""
        />
        <span class="mask-tip hvr-bounce-to-top">时尚休闲</span>
      </li>
      <li class="card-item">
        <img
          class="loopImg"
          src="https://www.luckincoffee.com/template/images/tea/product_wheel_snack_3-1.jpg"
          alt=""
        />
        <span class="mask-tip hvr-bounce-to-top">来点甜Q</span>
      </li>
    </ul>
    <!-- 列表区域 -->
      <van-card
        v-for="i in 6"
        num="2"
        price="22.00"
        desc="相信你会爱上这个恰好的味道"
        title="美式咖啡"
        thumb="https://www.luckincoffee.com/template/images/tea/product_wheel_coffee_main_new.jpg"
      />
    </van-pull-refresh>
  </div>
</template>

<script>
import { test } from "@/controller/MenuList.js";
import { mapMutations } from "vuex";
export default {
  name: "ShopCenter",
  created() {},
  data() {
    return {
      count: 0,
      isLoading: false,
    };
  },
  methods: {
    ...mapMutations("ShopCenter", ["CHANGE_TipFLAG", "SET_TIPMSG"]),
    handlerTest() {
      this.CHANGE_TipFLAG(true);
      this.SET_TIPMSG("正在为你准备中...");
      // this.$refs.loader.showLoading()
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.nav-card {
  height: 13.75rem;
  /* background-color: orchid; */
}
.list {
  height: calc(100vh - var(--tabar-hight) - 16.5rem);
  background-color: aliceblue;
  overflow-y: scroll;
  box-sizing: border-box;
}
.loopImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0.9);
  border-radius: 0.5625rem;
}
.card-box {
  width: 21.875rem;
  height: auto;
  background-color: #fafafa;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  box-sizing: border-box;
  margin: 1rem auto;
}
.card-item {
  width: 10.3125rem;
  height: 8.125rem;
  /* background-color: orange; */
  margin: 0.1875rem;
  position: relative;
}
.card-item > img {
  transform: scale(1);
}
.mask-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 10.3125rem;
  box-sizing: border-box;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  font-family: "TakeCo";
  font-weight: 300;
  color: #fff;
  text-align: center;
}
</style>